<template>
  <div id="">
    <button @click="change">{{ obj }}</button>
  </div>
</template>


<script setup lang="ts">
import { reactive, toRef, toRefs } from 'vue'
const obj = reactive({
  foo: 1,
  bar: 1
})
// toRef：可以将对象中的属性变为响应式
const state = toRef(obj, 'bar')
const change = () => {
  state.value++
  obj.foo++
}

// toRefs：将对象内结构出来的多个属性变为响应式的
let { foo, bar } = toRefs(obj)
</script>

<style lang="less">
</style>
